<template>
	<el-form size="medium" ref="innerForm" :model="innerForm">
		<el-table :data="innerForm.options" border class="table_option_wrapper">
			<el-table-column label="选项名" :min-width="isImg ? '160' : '100'">
				<template slot-scope="{ $index, row }">
					<el-form-item :prop="`options.${$index}.label`" :rules="innerRules.label">
						<el-input v-model="row.label" placeholder="输入选项名"></el-input>
						<template slot="error" slot-scope="{ error }">
							<el-tooltip effect="light" :content="error" placement="top-end" popper-class="table_option_tooltip">
								<span class="el-icon-warning-outline"></span>
							</el-tooltip>
						</template>
					</el-form-item>
				</template>
			</el-table-column>
			<el-table-column label="选项值" :min-width="isImg ? '90' : '100'">
				<template slot-scope="{ $index, row }">
					<el-form-item :prop="`options.${$index}.value`" :rules="innerRules.value">
						<el-input v-model="row.value" placeholder="输入选项值"></el-input>
						<template slot="error" slot-scope="{ error }">
							<el-tooltip effect="light" :content="error" placement="top-end" popper-class="table_option_tooltip">
								<span class="el-icon-warning-outline"></span>
							</el-tooltip>
						</template>
					</el-form-item>
				</template>
			</el-table-column>
			<el-table-column label="图片" width="160" v-if="isImg">
				<template slot-scope="{ $index, row }">
					<el-form-item :prop="`options.${$index}.img`" :rules="innerRules.img">
						<slot :data="row"></slot>
						<template slot="error" slot-scope="{ error }">
							<el-tooltip effect="light" :content="error" placement="top-end" popper-class="table_option_tooltip">
								<span class="el-icon-warning-outline"></span>
							</el-tooltip>
						</template>
					</el-form-item>
				</template>
			</el-table-column>
			<el-table-column align="center" width="36" class-name="add">
				<template slot="header">
					<el-button type="text" title="新增选项" icon="el-icon-plus" @click="handleAddedOption()"></el-button>
				</template>
				<template slot-scope="{ $index, row }">
					<el-button type="text" title="删除选项" icon="el-icon-delete" @click="handleDeleteOption($index)"></el-button>
				</template>
			</el-table-column>
		</el-table>
	</el-form>
</template>

<script>
import emitter from 'element-ui/src/mixins/emitter';
export default {
	name: 'swTableForm',
	mixins: [emitter],
	props: {
		value: { type: Array, default: () => [] },
		isImg: { type: Boolean, default: false }
	},
	data() {
		return {
			innerForm: { options: this.value },
			innerRules: {
				label: { required: true, message: '请输入选项名', trigger: ['blur', 'change'] },
				value: { required: true, message: '请输入选项值', trigger: ['blur', 'change'] },
				img: { required: true, message: '请上传选项图片', trigger: 'change' }
			}
		};
	},
	watch: {
		value(arr) {
			this.$set(this.innerForm, 'options', arr);
		},
		'innerForm.options': {
			handler(arr) {
				this.$emit('input', arr);
				this.dispatch('ElFormItem', 'el.form.change', [arr]);
			},
			deep: true
		}
	},
	mounted() {},
	methods: {
		//新增选项
		handleAddedOption() {
			let options = this.innerForm.options;
			options.push({ label: '', value: '' });
		},

		//删除选项
		handleDeleteOption(index) {
			let options = this.innerForm.options;
			options.splice(index, 1);
		},

		//验证表格表单
		validChildForm() {
			return new Promise((resolve) => {
				this.$refs['innerForm'].validate((valid) => {
					resolve(valid);
				});
			});
		}
	}
};
</script>
<style lang="scss">
.table_option_tooltip {
	margin-right: -5px;
	&.is-light {
		color: #f00;
		border-color: #f00;
	}
	&.is-light[x-placement^='top'] {
		.popper__arrow {
			border-top-color: #f00;
		}
	}
	.popper__arrow {
		margin-left: 9px;
	}
}
</style>
<style lang="scss" scoped>
.table_option_wrapper::v-deep {
	width: 100%;
	.el-table__cell {
		padding: 0;
		font-size: 0;
		line-height: 1;
		.cell {
			font-size: 14px;
			padding: 0;
			line-height: 1;
		}
	}
	th.el-table__cell {
		height: 36px;
		&:not(.add) .cell {
			padding: 0 15px;
		}
	}
	.el-form-item {
		margin: 0;
	}
	.el-input__inner {
		border: none;
	}
	.cell {
		padding: 0;
	}
	.el-table__empty-block {
		min-height: 37px;
	}
	.el-table__empty-text {
		line-height: 36px;
	}
	.el-form-item__content {
		font-size: 0;
		line-height: 1;
	}
	.el-button {
		font-size: 16px;
		padding: 8px;
	}
	.el-tooltip {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 16px;
		height: 16px;
		z-index: 1;
		color: #f00;
		font-size: 16px;
	}
}
</style>
